<!--
 * @Description: 菜单管理
 * @Version: 1.0
 * @Author: yxx
 * @Date: 2023-09-22 09:27:50
 * @LastEditors: yxx
 * @LastEditTime: 2024-12-09 15:55:33
-->
<template>
  <div class="menu-manage-container">
    <el-card>
      <el-form :inline="true" :model="formInline" class="fliter-form-inline">
        <el-form-item label="菜单名称">
          <el-input v-model="formInline.name" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-row :gutter="20" style="margin-top: 10px">
      <el-col :span="24">
        <el-card>
          <el-button type="primary" style="margin-bottom: 20px" @click="initTree">新增</el-button>
          <el-table
            :data="tableData"
            style="width: 100%"
            row-key="id"
            border
            default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column prop="name" label="菜单名称" width="160"></el-table-column>
            <el-table-column prop="name" label="图标" width="90">
              <template #default="scope">
                <el-icon :size="16" color="#606266"><component :is="scope.row.icon" /></el-icon>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="排序" width="90">
              <template #default="scope">
                {{ scope.row.sort }}
              </template>
            </el-table-column>
            <el-table-column prop="isHide" label="显示状态" width="90">
              <template #default="scope">
                {{ scope.row.isHide ? "隐藏" : "显示" }}
              </template>
            </el-table-column>
            <el-table-column prop="path" label="路径" width="350"></el-table-column>
            <el-table-column prop="component" label="组件路径" width="450"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column label="操作" width="160" fixed="right">
              <template #default="scope">
                <el-button @click="handleAdd(scope.row)" link type="primary">新增</el-button>
                <el-button @click="handleEdit(scope.row)" link type="primary">修改</el-button>
                <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <add-menu-dialog ref="addMenuDialogRef" @refresh-data="getTableData"></add-menu-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { ElMessage, ElMessageBox } from "element-plus"
import { getMenuTreeApi, menuTreeDeleteApi } from "@/api/modules/system"
import { SysRes } from "@/api/interface/system/response"
import AddMenuDialog from "./components/AddMenuDialog.vue"

const addMenuDialogRef = ref<InstanceType<typeof AddMenuDialog>>()

interface FormData {
  name: string
}
const formInline = ref<FormData>({
  name: ""
})
const tableData = ref<SysRes.MenuTree[]>([])

/** 获取 表格数据 */
const getTableData = async () => {
  const { data } = await getMenuTreeApi()
  tableData.value = data
}
/** 初始化 菜单树 */
const initTree = () => {
  addMenuDialogRef.value?.handleOpen()
  const tree = [
    {
      name: "主类目",
      id: 0,
      children: tableData.value
    }
  ]
  if (addMenuDialogRef.value) {
    addMenuDialogRef.value.parentTree = tree
  }
}
/** 按钮 重置 */
const handleReset = () => {
  formInline.value.name = ""
  getTableData()
}
/** 按钮 新增 */
const handleAdd = (data: SysRes.MenuTree) => {
  initTree()
  if (addMenuDialogRef.value) {
    addMenuDialogRef.value.ruleForm.pid = data.id
  }
}
/** 表格操作 编辑 */
const handleEdit = (data: SysRes.MenuTree) => {
  initTree()
  if (addMenuDialogRef.value) {
    addMenuDialogRef.value.ruleForm = JSON.parse(JSON.stringify(data))
  }
}
/** 表格操作 删除 */
const handleDelete = (data: SysRes.MenuTree) => {
  ElMessageBox.confirm("确定删除此菜单?", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    menuTreeDeleteApi({ id: data.id }).then(() => {
      ElMessage.success("删除成功")
      getTableData()
    })
  })
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped lang="scss"></style>
